extends layouts/_layout.pug

block variables
	- var activePage = 'form-samples';
	- var activeGroup = 'forms';

block title
	title Form Samples - Vali Admin

block content
	.app-title
		div
			h1
				i.fa.fa-edit
				|  Form Samples
			p Sample forms

		ul.app-breadcrumb.breadcrumb
			li.breadcrumb-item
				i.fa.fa-home.fa-lg
			li.breadcrumb-item
				| Forms
			li.breadcrumb-item
				a(href="#") Sample Forms

	.row
		.col-md-6
			.tile
				h3.tile-title Vertical Form
				.tile-body
					form
						.form-group
							label.control-label Name
							input.form-control(type="text", placeholder="Enter full name")

						.form-group
							label.control-label Email
							input.form-control(type="email", placeholder="Enter email address")

						.form-group
							label.control-label Address
							textarea.form-control(rows="4", placeholder="Enter your address")

						.form-group
							label.control-label Gender
							.form-check
								label.form-check-label
									input.form-check-input(type='radio', name="gender")
									| Male
							.form-check
								label.form-check-label
									input.form-check-input(type='radio', name="gender")
									| Female

						.form-group
							label.control-label Identity Proof
							input.form-control(type="file")

						.form-group
							.form-check
								label.form-check-label
									input.form-check-input(type='checkbox')
									| I accept the terms and conditions

				.tile-footer
					button.btn.btn-primary(type="button")
						i.fa.fa-fw.fa-lg.fa-check-circle
						| Register
					| &nbsp;&nbsp;&nbsp;
					a.btn.btn-secondary(href="#")
						i.fa.fa-fw.fa-lg.fa-times-circle
						| Cancel

		.col-md-6
			.tile
				h3.tile-title Register
				.tile-body
					form.form-horizontal
						.form-group.row
							label.control-label.col-md-3 Name
							.col-md-8
								input.form-control(type="text", placeholder="Enter full name")

						.form-group.row
							label.control-label.col-md-3 Email
							.col-md-8
								input.form-control.col-md-8(type="email", placeholder="Enter email address")

						.form-group.row
							label.control-label.col-md-3 Address
							.col-md-8
								textarea.form-control(rows="4", placeholder="Enter your address")

						.form-group.row
							label.control-label.col-md-3 Gender
							.col-md-9
								.form-check
									label.form-check-label
										input.form-check-input(type='radio', name="gender")
										| Male
								.form-check
									label.form-check-label
										input.form-check-input(type='radio', name="gender")
										| Female

						.form-group.row
							label.control-label.col-md-3 Identity Proof
							.col-md-8
								input.form-control(type="file")

						.form-group.row
							.col-md-8.col-md-offset-3
								.form-check
									label.form-check-label
										input.form-check-input(type='checkbox')
										| I accept the terms and conditions

				.tile-footer
					.row
						.col-md-8.col-md-offset-3
							button.btn.btn-primary(type="button")
								i.fa.fa-fw.fa-lg.fa-check-circle
								| Register
							| &nbsp;&nbsp;&nbsp;
							a.btn.btn-secondary(href="#")
								i.fa.fa-fw.fa-lg.fa-times-circle
								| Cancel
		.clearix

		.col-md-12
			.tile
				h3.tile-title Subscribe

				.tile-body

					form.row

						.form-group.col-md-3
							label.control-label Name
							input.form-control(type="text", placeholder="Enter your name")

						.form-group.col-md-3
							label.control-label Email
							input.form-control(type="text", placeholder="Enter your email")

						.form-group.col-md-4.align-self-end
							button.btn.btn-primary(type="button")
								i.fa.fa-fw.fa-lg.fa-check-circle
								| Subscribe

